<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	
			li {
				list-style: none;
				line-height: 50px;
				border-bottom: 1px dashed #D4D4D4;
				position: relative;
			}
			ul{
				width: 260px;
				border: 1px solid #D4D4D4;
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
				font-size: 16px;
			}
			.p12{
				padding: 0px 12px;
			}
			.p11{
				color: red;
				/*float: left;*/
			}
			.contair{
				overflow: hidden;
			    width: 70%;
			    position: absolute;
			    left:30px;
			    top:10px;
			    display: none;
			}
			.contair div{
				float: left;
				margin-left: 10px;
			}
			
			.txt p{
				line-height: 10px;
			}
			ul li:hover {
				height: 110px;
			}
			ul li:hover .contair{
				display: block;
			}
			ul li:hover .aaa{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="toptern">
		<ul>
			<li>
				<span><strong class="p12 p11">1</strong></span>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa" style="clear: both;">萤火虫小巷</span>
			</li>
			<li>
				<span><strong class="p12 p11">1</strong></span>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
			<li>
				<strong class="p12 p11">1</strong>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
			<li>
				<strong class="p12 p11">1</strong>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
			<li>
				<strong class="p12 p11">1</strong>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
			
			<li>
				<strong class="p12 p11">1</strong>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
			<li>
				<strong class="p12 p11">1</strong>
				<div class="contair">
					<div class="imgbg">
						<img src="img/2019-10-10_134732.png" width="70px" height="90px" />
					</div>
					<div class="txt">
						<p>萤火虫小巷</p>
						<p>&yen;6.50</p>
						<p>&yen;26.00</p>
					</div>
				</div>
				<span class="aaa">萤火虫小巷</span>
			</li>
		</ul>
		</div>
	</body>
</html>
